<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件2</title>
  </head>

  <body>
    <div id="app">
      <h1>------------App组件---------------</h1>
      <h1>{{msg}}</h1>
      <Person></Person>
      <Student></Student>
    </div>

  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    关于VueComponent:
    一.School组件本质上是一个命名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
    二.我们只需要写<School/>或<School></School>,Vue解析时会帮我们创建School组件的实例对象
       即Vue帮我们执行的:new VueComponent(options).
    三.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
    四.关于this的指向:
       4.1 组件配置中：data函数,methods中的函数，watch中的函数,computed中的函数，它们的this都是[VueComponent实例对象]   
       4.2 new Vue(options)中:data函数,methods中的函数，watch中的函数,computed中的函数，它们的this都是[Vue实例对象]
    五.我们以后称VueComponent的实例对象，以后我们称vc(也可以称之为:组件实例对象)
              Vue实例对象，我们称之为vm   


    三.特别提示：
        3.1 Student确实是构造函数，但不是我们亲手写的Student，是Vue.extend生成的。
        3.2 Vue.extend调用的返回值是VueComponent构造函数，所以new Student其实就是在new VueComponent.
        3.3 所谓组件实例，就是VueComponent创建的实例，简称vc
            所谓Vue实例，就是Vue创建的实例，简称vm
    四.最重要的关系总结：
        VueComponent继承了Vue,所以Vue.prototype上得属性和方法，vc度可以看得见  
    
    */
    Vue.config.productionTip = false;

    const Man = Vue.extend({
      data() {
        return {
          msg: "我是一个男人"
        }
      },
      template: `
        <div>
          <h1>-----------Man对象-------------</h1>
          <h2>{{msg}}</h2>
        </div>
      `
    })

    const Person = Vue.extend({
      data() {
        return {
          msg: "我是一个Person对象"
        }
      },
      template: `
        <div>
          <h1>-----------Person对象-------------</h1>
          <h2>{{msg}}</h2>
          <Man></Man>
        </div>
      `,
      components: {
        Man
      }
    })

    Vue.prototype.xyz = 100;

    const Student = Vue.extend({
      data() {
        return {
          msg: "我是一个Student对象"
        }
      },
      template: `
        <div>
          <h1>-----------Student对象-------------</h1>
          <h2>{{msg}}</h2>
        </div>
      `
    })



    /* Vue.component('Person', Person)
    Vue.component('Student', Student) */

    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "Hello Vue"
        }
      },
      components: {
        Student,
        Person,
      }
    })


    // vm.$children[0].__proto__.__proto__ === Vue.prototype //true
    // vm.$children[0].__proto__ instanceof Vue //true
  </script>

</html>